<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h3>个人资料</h3>
        </div>
      </template>
      <div v-if="userStore.userInfo" class="profile-content">
        <el-form :model="userForm" label-width="100px" ref="formRef">
          <el-form-item label="用户ID">
            <el-input v-model="userForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="userForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="userForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="userForm.departmentName" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-tag 
              v-for="role in userRoles" 
              :key="role.code" 
              class="role-tag"
              :type="getRoleTagType(role.code)"
            >
              {{ role.name }}
            </el-tag>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate" :loading="loading">保存修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { updateUser } from '@/api/user'

const userStore = useUserStore()
const loading = ref(false)

// 表单数据
const userForm = reactive({
  id: '',
  username: '',
  nickname: '',
  email: '',
  phone: '',
  departmentName: ''
})

// 格式化角色
const userRoles = computed(() => {
  if (!userStore.userInfo || !userStore.userInfo.roles) return []
  
  const roleMap: Record<string, string> = {
    'ADMIN': '系统管理员',
    'MANAGER': '部门经理',
    'EMPLOYEE': '普通员工'
  }
  
  return userStore.userInfo.roles.map(code => ({
    code,
    name: roleMap[code] || code
  }))
})

// 获取角色标签类型
const getRoleTagType = (roleCode: string) => {
  const typeMap: Record<string, string> = {
    'ADMIN': 'danger',
    'MANAGER': 'warning',
    'EMPLOYEE': 'success'
  }
  return typeMap[roleCode] || 'info'
}

// 更新用户信息
const handleUpdate = async () => {
  loading.value = true
  try {
    const data = {
      id: userForm.id,
      nickname: userForm.nickname,
      email: userForm.email,
      phone: userForm.phone
    }
    await updateUser(data)
    await userStore.fetchUserInfo() // 刷新用户信息
    ElMessage.success('个人资料更新成功')
  } catch (error: any) {
    ElMessage.error(error.message || '更新失败')
  } finally {
    loading.value = false
  }
}

// 初始化表单数据
onMounted(async () => {
  if (!userStore.userInfo) {
    try {
      await userStore.fetchUserInfo()
    } catch (error) {
      console.error('获取用户信息失败', error)
    }
  }
  
  if (userStore.userInfo) {
    Object.assign(userForm, {
      id: userStore.userInfo.id,
      username: userStore.userInfo.username,
      nickname: userStore.userInfo.nickname,
      email: userStore.userInfo.email,
      phone: userStore.userInfo.phone,
      departmentName: userStore.userInfo.departmentName || '未分配'
    })
  }
})
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.profile-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-content {
  padding: 20px 0;
}

.role-tag {
  margin-right: 5px;
}
</style> 